<template>
  <main>
    <el-button type="primary" @click="initData">开始</el-button>
    <el-divider />
    <div class="game-container">
      <div
        class="snake"
        v-for="(item, index) in snake"
        :key="index"
        :style="'left:' + item.x * 20 + 'px;top:' + item.y * 20 + 'px'"
      ></div>
      <div class="food" :style="'left:' + food.x * 20 + 'px;top:' + food.y * 20 + 'px'"></div>
    </div>
  </main>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
const flag = ref(false)
// 贪吃蛇
const snake = ref([])
// 食物
const food = ref({})
// 移动
let direction = 'right'
let timer = null
const moveSnake = () => {
  if (!flag.value) {
    return false
  }
  // 获取蛇头
  const head = { ...snake.value[0] }
  console.log('head', head)
  switch (direction) {
    case 'up':
      head.y--
      break
    case 'down':
      head.y++
      break
    case 'left':
      head.x--
      break
    case 'right':
      head.x++
      break
    default:
      break
  }
  snake.value.unshift(head)
  // 吃到食物
  console.log('food.value', food.value)
  console.log(head.value)
  if (food.value.x === head.x && food.value.y === head.y) {
    console.log(1111)
    // 随机再生成一个食物
    food.value = {
      x: Math.floor(Math.random() * 24),
      y: Math.floor(Math.random() * 24)
    }
  } else {
    // 没吃到删除最后一个
    snake.value.pop()
  }
  // 判断是否碰撞
  if (head.x < 0 || head.x >= 24 || head.y < 0 || head.y >= 24) {
    flag.value = false
    openMessage('游戏结束')
    if (timer) {
      clearInterval(timer)
    }
    return false
  }
  if (!timer) {
    timer = setInterval(() => {
      moveSnake()
    }, 1000)
  }
}
// 更新贪吃
// 初始化
const initData = () => {
  flag.value = true
  snake.value = [{ x: 1, y: 1 }]
  food.value = { x: 5, y: 5 }
  moveSnake()
}
// 提示框
const openMessage = (msg) => {
  ElMessageBox.alert(msg, '提示', {
    confirmButtonText: '确定'
  })
}
onMounted(() => {
  // contextmenu 禁用右键菜单
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault()
  })
  document.addEventListener('keydown', (event) => {
    console.log(event)
    switch (event.key) {
      case 'ArrowUp':
        if (direction !== 'down') {
          direction = 'up'
        }
        break
      case 'ArrowDown':
        if (direction !== 'up') {
          direction = 'down'
        }
        break
      case 'ArrowLeft':
        if (direction !== 'right') {
          direction = 'left'
        }
        break
      case 'ArrowRight':
        if (direction !== 'left') {
          direction = 'right'
        }
        break
      default:
        break
    }
  })
})
</script>
<style lang="scss" scoped>
main {
  width: 700px;
  height: 700px;
  .game-container {
    margin: auto;
    width: 500px;
    height: 500px;
    border: 1px solid #000000;
    position: relative;
    .snake {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #000000;
    }
    .food {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #000000;
      animation: blink-animation 1s infinite;
    }
  }
}
@keyframes blink-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
